<template>
  <div>
    <navs></navs>
    <!-- 列表 -->
    <van-tabs @click="listTab">
      <van-tab
        v-for="(item, index) in list"
        :title="item.app"
        :name="item.id"
        :key="index"
      >
        <div class="Showmx-wrap">
          <div
            v-for="(items, indexs) in listShow"
            class="wrap-card"
            @click="details(items.ids)"
          >
            <div>
              <van-image class="img" :src="items.haibao" lazy-load />
            </div>
            <div class="title-wrap">
              <p>{{ items.title1 }}</p>
              <p>{{ items.timer }}</p>
              <p>场馆：{{ items.weizhi }}</p>
              <p>{{ items.price }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import navs from '../show/search.vue'
export default {
  name: "WorkspaceJsonShowlist",

  data() {
    return {
      listShow: [],
      list: [
        { app: "演唱会", id: 1 },
        { app: "话剧歌剧", id: 2 },
        { app: "休闲展览", id: 3 },
        { app: "戏曲艺术", id: 4 },
        { app: "音乐节", id: 5 },
        { app: "亲子演出", id: 6 },
        { app: "音乐会", id: 7 },
        { app: "舞蹈芭蕾", id: 8 },
        { app: "体育赛事", id: 9 },
        { app: "其他", id: 10 },
      ],
    };
  },
  components:{
    navs
  },

  mounted() {
    this.listTab(1);
  },

  methods: {
    detailtab(mid) {
      console.log(mid);
    },
    //   tab栏
    listTab(id) {
      this.$http
        .get("/pages_yanchu", {
          params: {
            mid: id,
          },
        })
        .then((res) => {
          this.listShow = res.data;
        });
    },
    details(ids) {
      console.log(ids);
      this.$router.push({path:'/showDetail',query:{ids:ids}})
    },
  },
};
</script>

<style lang="scss" scoped>
.Showmx-wrap {
  box-sizing: border-box;
  width: 100%;
  background: rgb(255, 255, 255);
  .pages-fen {
    padding-top: 30px;
    width: 100%;
    text-align: center;
  }
  .wrap-card {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    width: 100%;
    height: 238px;
    border-bottom: 1px solid rgb(218, 214, 214);
    > div {
      width: 130px;
      height: 190px;
      margin-right: 8vw;
      .img {
        width: 130px;
        height: 190px;
        border-radius: 10px;
      }
    }

    .title-wrap {
      p {
        width: 45vw;
      }
      p:nth-child(1) {
        font-size: 15px;
        font-weight: bold;
      }
      p:nth-child(2) {
        font-size: 15px;
        color: rgb(124, 120, 120);
      }
      p:nth-child(3) {
        font-size: 15px;
        color: rgb(124, 120, 120);
      }
      p:nth-child(4) {
        font-size: 22px;
        color: rgb(236, 42, 42);
      }
    }
    .wrap-card-buys {
      padding: 15px 40px;
      background: rgb(16, 143, 247);
      border-radius: 10px;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>